<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../../build/css/bootstrap-datetimepicker.css">
<script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../../node_modules/moment/moment.js"></script>
<script src="../../../src/js/bootstrap-datetimepicker.js"></script>
<style>
.parent{
    position: relative;
    padding: 40px;
}
.helper{
    z-index: -1;
    position: absolute;
    background-color: #bfb;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    opacity: 0.3;
}
.inner{
    position: absolute;
    background-color: #bbf;
    top: 40px;
    bottom: 40px;
    right: 40px;
    left: 40px;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>{{v}} - {{h}}</h1>
            <br><br><br><br><br><br><br><br><br><br>
            <div class="parent">
                <div class="helper">
                    <div class="inner"></div>
                </div>
                <br><br><br><br><br>

                {{{t}}}

                <br><br><br><br><br>
            </div>
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('[data-datetimepicker]').datetimepicker({
        widgetPositioning:{
            vertical: '{{v}}',
            horizontal: '{{h}}'
        }
    });
    $('input[data-click-target]').focus();
    $('span[data-click-target]').click();
</script>
</body>
